<template>
  <div class="login">
    <img class="logo" src="../assets/logoname.png" alt />
    <div class="title">欢迎使用 韩乐讯自媒体平台</div>
    <div class="box">
      <!-- 标题 -->
      <div class="head">
        <div class="headbox headbox1">
          <div class="headtit shoushou" @click="qiehuan(1)">密码登录</div>
          <div class="xiahuaxian" v-if="logintype==1"></div>
        </div>
        <div class="headbox">
          <div class="headtit shoushou" @click="qiehuan(2)">短信登录</div>
          <div class="xiahuaxian" v-if="logintype==2"></div>
        </div>
      </div>
      <!-- 手机号 -->
      <div class="phone">
        <div class="phonetit">手机号</div>
        <input type="text" v-model="phonenum" />
      </div>
      <!-- 密码 -->
      <div class="password" v-if="logintype==1">
        <div class="passwordtit">密码</div>
        <input type="password" v-model="password" />
        <div class="mimastyle">6-20位字母或数字，区分大小写</div>
      </div>

      <!-- 验证码 -->
      <div class="code" v-if="logintype==2">
        <div class="codetit">验证码</div>
        <input type="text" v-model="code" />
        <div class="getcode shoushou" v-if="showdumiao==false" @click="huoqucode">获取验证码</div>
        <div class="getcode" v-if="showdumiao==true">{{dumiao}}s后重新获取</div>
      </div>

      <!-- 记住我   忘记密码 | 注册  -->
      <div class="cont">
        <div v-if="logintype==2"></div>
        <div class="cont-left shoushou" v-if="logintype==1" @click="jizhuwo">
          <img v-if="jizhu==false" src="../assets/wxuanzhong.png" alt />

          <img v-if="jizhu==true" src="../assets/yxuanzhong.png" alt />

          <div>记住我</div>
        </div>
        <div class="cont-right">
          <div class="shoushou" @click="wangjimima">忘记密码</div>
          <div class="shu">|</div>
          <div class="shoushou" @click="zhuce">注册</div>
        </div>
      </div>
      <!-- 登录 -->
      <div class="denglu shoushou" @click="login">登录</div>
      <!-- 第三方账号登录 -->
      <!-- <div class="disanfang">第三方账号登录</div> -->
      <!-- QQ  微信   微博 -->
      <!-- <div class="qqwxwb">
        <img src="../assets/QQ.png" alt="">
        <img class="wx" src="../assets/wx.png" alt="">
        <img src="../assets/wb.png" alt="">
      </div>-->
    </div>
  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
      // 1 密码登录 2验证码登录
      logintype: 1,
      showdumiao: false,
      dumiao: 60,
      timer: "",
      phonenum: "",
      password: "",
      code: "",
      jizhu: false
    };
  },
  mounted() {
    var phonenum = this.$cookies.get("phonenum");
    var password = this.$cookies.get("password");
    if (phonenum) {
      this.phonenum = phonenum;
      this.password = password;
    }
  },
  methods: {
    //切换
    qiehuan(index) {
      this.logintype = index;
    },
    // 获取验证码
    huoqucode() {
      if (this.phonenum == "") {
        this.$message({
          showClose: true,
          message: "手机号不能为空",
          type: "error"
        });
        return;
      }

      if (!/^1[3456789]\d{9}$/.test(this.phonenum)) {
        this.$message({
          showClose: true,
          message: "请输入正确手机号",
          type: "error"
        });
        return;
      }

      this.showdumiao = true;
      this.dumiao = 60;
      var that = this;
      that.timer = setInterval(function() {
        that.dumiao = that.dumiao - 1;
        if (that.dumiao == 0) {
          that.showdumiao = false;
          clearInterval(that.timer);
        }
      }, 1000);
      this.ajaxcode();
    },
    //记住我
    jizhuwo() {
      this.jizhu = !this.jizhu;
    },

    ajaxcode() {
      var that = this;
      this.$get(
        // method: "get",
        "media/users/send_phone",
        {
          phone: this.phonenum,
          type: "2"
        }
      ).then(response => {
        console.log(response);
        if (response.error == "0") {
        } else {
          this.$message({
            showClose: true,
            message: response.data.message,
            type: "error"
          });
        }
      });
    },

    // 记住存密码
    cunmima() {
      this.$cookies.set("phonenum", this.phonenum, 60 * 60 * 24 * 7);
      this.$cookies.set("password", this.password, 60 * 60 * 24 * 7);
    },
    wangjimima() {
      this.$router.push({ name: "forgetmima", params: {} });
    },
    zhuce() {
      this.$router.push({ name: "enroll", params: {} });
    },
    login() {
      if (this.phonenum == "") {
        this.$message({
          showClose: true,
          message: "手机号不能为空",
          type: "error"
        });
        return;
      }

      if (!/^1[3456789]\d{9}$/.test(this.phonenum)) {
        this.$message({
          showClose: true,
          message: "请输入正确手机号",
          type: "error"
        });
        return;
      }

      if (this.logintype == 1) {
        if (this.password == "") {
          this.$message({
            showClose: true,
            message: "密码不能为空",
            type: "error"
          });
          return;
        }

        if(/^[a-zA-Z0-9]{6,20}$/.test(this.password)){
           this.$message({
            showClose: true,
            message: "密码格式不正确",
            type: "error"
          });
          return;
        }

        if (this.jizhu == true) {
          this.cunmima();
        }

        this.$axios({
          method: "post",
          url: "media/users/login",
          data: this.$qs.stringify({
            phone: this.phonenum,
            platform: "PC",
            type: "1",
            password: this.password
          }),
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
          }
        }).then(response => {
          console.log(response);
          if (response.data.error == "0") {
            localStorage.setItem("uqid", response.data.data.uqid);
            if (
              response.data.data.is_perfect == 1 &&
              response.data.data.is_media == 1
            ) {
              this.$router.push({ name: "indexbox", params: {} });
            } else if (response.data.data.is_media == 2) {
              this.$router.push({ name: "shenhezhong", params: {} });
            } else {
              this.$router.push({
                name: "enterxinxi",
                params: {
                  is_perfect: response.data.data.is_perfect,
                  is_media: response.data.data.is_media
                }
              });
            }
          } else {
            this.$message({
              showClose: true,
              message: response.data.message,
              type: "error"
            });
          }
        });
      } else {
        if (this.code == "") {
          this.$message({
            showClose: true,
            message: "验证码不能为空",
            type: "error"
          });
          return;
        }

        this.$axios({
          method: "post",
          url: "media/users/login",
          data: this.$qs.stringify({
            phone: this.phonenum,
            platform: "PC",
            type: "2",
            code: this.code
          }),
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
          }
        }).then(response => {
          console.log(response);
          if (response.data.error == "0") {
            localStorage.setItem("uqid", response.data.data.uqid);
            if (
              response.data.data.is_perfect == 1 &&
              response.data.data.is_media == 1
            ) {
              this.$router.push({ name: "indexbox", params: {} });
            } else if (response.data.data.is_media == 2) {
              this.$router.push({ name: "shenhezhong", params: {} });
            } else {
              this.$router.push({
                name: "enterxinxi",
                params: {
                  is_perfect: response.data.data.is_perfect,
                  is_media: response.data.data.is_media
                }
              });
            }
          } else {
            this.$message({
              showClose: true,
              message: response.data.message,
              type: "error"
            });
          }
        });
      }
    }
  }
};
</script>

<style scoped>
.mimastyle{
  font-size:12px;
  /* font-family:.PingFang SC; */
  font-weight:300;
  line-height:17px;
  /* color:rgba(172,172,172,1); */

  color:rgba(172,172,172,1);
}
.shoushou {
  cursor: pointer;
}
.login {
  width: 100vw;
  height: 100vh;
  background: url(../assets/bg.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.logo {
  position: absolute;
  left: 68px;
  top: 35px;
}
.title {
  position: absolute;
  left: 72px;
  bottom: 108px;
  font-size: 28px;
  font-weight: 300;
  line-height: 40px;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
}
.box {
  position: absolute;
  right: 107px;
  bottom: 98px;
  width: 500px;
  height: 640px;
  background: rgba(255, 255, 255, 1);
  opacity: 1;
  border-radius: 10px;
  padding: 0 69px;
  box-sizing: border-box;
  font-size: 14px
}
/* 标题 */
.head {
  width: 362px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.headbox {
  height: 30px;
  font-size: 16px;
  font-weight: 300;
  line-height: 22px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-top: 70px;
}
.xiahuaxian {
  width: 62px;
  height: 2px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  margin-top: 5px;
}
.headbox1 {
  margin-right: 72px;
}
/* 手机号 */
.phone {
  width: 100%;
  margin-top: 42px;
}
.phonetit {
  font-size: 16px;
  font-weight: 300;
  line-height: 22px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
}
input {
  width: 100%;
  height: 48px;
  border: 1px solid rgba(231, 237, 252, 1);
  opacity: 1;
  border-radius: 3px;
  margin-top: 11px;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
  padding: 14px 22px;
  box-sizing: border-box;
}
/* 密码 */
.password {
  width: 100%;
  margin-top: 33px;
}
.passwordtit {
  font-size: 16px;
  font-weight: 300;
  line-height: 22px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
}
/* 验证码 */
.code {
  width: 100%;
  margin-top: 33px;
  position: relative;
}
.codetit {
  font-size: 16px;
  font-weight: 300;
  line-height: 22px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
}
.getcode {
  position: absolute;
  right: 22px;
  top: 46px;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  color: rgba(92, 92, 92, 1);
  opacity: 1;
}
/* 记住我   忘记密码 | 注册 */
.cont {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 31px;
}
.cont-left {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
}
.cont-left > img {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}
.cont-right {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  color: rgba(92, 92, 92, 1);
  opacity: 1;
}
.cont-right .shu {
  margin: 0 8px;
}
/* 登录 */
.denglu {
  width: 362px;
  height: 50px;
  background: rgba(38, 106, 255, 1);
  opacity: 1;
  border-radius: 3px;
  line-height: 50px;
  font-size: 16px;
  font-weight: 300;
  line-height: 50px;
  color: rgba(255, 255, 255, 1);
  opacity: 1;
  text-align: center;
  margin-top: 89px;
}
.disanfang {
  font-size: 14px;
  font-weight: 300;
  line-height: 20px;
  color: rgba(51, 51, 51, 1);
  opacity: 1;
  margin-top: 37px;
  text-align: center;
}
.qqwxwb {
  text-align: center;
  margin-top: 19px;
}
.wx {
  margin: 0 51px;
}
</style>